<template>
		<view>
			<view class="card">
				<image class="profile-pic" :src="url" 
				mode="widthFix" show-menu-by-longpress="true" 
				@load="success"
				:style="`width:80%;height:${height}`"></image>
			</view>
			<text style="margin-left: 15%; font-size: 16px;font-weight: bold;">长按图片保存或添加企业微信</text>
		</view>
</template>

<script setup lang="ts">
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import {ref,onMounted} from 'vue'
	
	const url=ref('')
	const width=ref()
	const height=ref()
	const loading=ref(false)
	onShow(()=>{
		if(loading.value===false){
			uni.showLoading({
				mask:true,
				title:'图片加载中'
			})
		}
	})
	onLoad((option)=>{
		url.value=option.poster
	})
	onMounted(()=>{
		const info=wx.getWindowInfo()
		width.value=info.safeArea.width
		height.value=info.safeArea.height*0.5
	})
	
	const success=()=>{
		loading.value=true
		uni.hideLoading()
	}
</script>

<style scoped>
	.card {
	  margin: 20px;
	  margin-left: 35px;
	  width: 100%;
	}
	
	page{
		background-color: rgb(246, 246, 246);
	}
</style>